<template>
  <div class="box">
    <h1>小案例</h1>
    <div class="nav-box">
      <div :class="index === 0 ? 'active' : ''" @click="changeIndex(0)">微信</div>
      <div :class="index === 1 ? 'active' : ''" @click="changeIndex(1)">通讯录</div>
      <div :class="index === 2 ? 'active' : ''" @click="changeIndex(2)">发现</div>
      <div :class="index === 3 ? 'active' : ''" @click="changeIndex(3)">我</div>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";

const index = ref(0);

const changeIndex = (i) => {
  index.value = i;
}

</script>

<style  scoped>
.box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.nav-box {
  width: 400px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 40px;
  border: 1px solid #ccc;
}
.active {
  color: green;
  font-weight: 800;
}
</style>